<template>
    <div>
        <div class="app-container">
            <TopInfo />
            <Search :lookup="data.lookup" @investigate="inves" />
            <div v-prmis="'micro_mall_add'">
                <el-button type="primary" @click="add(1)">添加微商城</el-button>
            </div>
        </div>
        <div class="app-container" v-loading="data.mtloading">
            <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" class="w-full">
                <el-table-column prop="mall_name" label="微商城名称" show-overflow-tooltip />
                <el-table-column prop="logo" label="LOGO" show-overflow-tooltip />
                <el-table-column prop="cover_pic" label="封面图片" show-overflow-tooltip />
                <el-table-column prop="hint" label="提示" show-overflow-tooltip />
                <el-table-column prop="url" label="跳转URL" show-overflow-tooltip />
                <el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
                    <template #default="scope">
                        {{ getPlevel.gettime(scope.row.create_time, 3) }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('public.operate')" width="220">
                    <template #default="scope">
                        <el-button v-prmis="'micro_mall_bindList'" size="small" type="danger" @click="bind(scope.row)">{{ $t('public.bind') }}</el-button>
                        <el-button v-prmis="'micro_mall_update'" size="small" type="primary" @click="add(2, scope.row)">{{ $t('public.modify') }}</el-button>
                        <el-button v-prmis="'micro_mall_del'" size="small" type="danger" @click="del(scope.row.mm_id)">{{ $t('public.del')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <PageNum :total="data.total" :page="data.errinfo" @exposeData="current" @fraction="fraction" />
        </div>
        <el-dialog v-model="data.dialogVisible" :title="data.title" center width="35%">
            <el-form v-if="data.dialogVisible" :model="data.errinfo" label-width="100px">
                <span class="text-[red] absolute mt-2 ml-1">*</span>
                <el-form-item label="微商城名称:" prop="error_code">
                    <el-input v-model.number="data.addinfo.mall_name" :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <el-form-item label="封面图片:" prop="cover_pic">
                    <el-select v-model="data.addinfo.cover_pic" :placeholder="$t('message.pleaseSelect')" clearable filterable
                        style="width: 94%;">
                        <el-option v-for="item of data.imgarr" :key="item.res_id"
                            :label="item.res_id + '-' + item.title" :value="item.file_path" />
                    </el-select>
                    <el-icon style="width: 6%;" size="20" @click="urlimg(data.addinfo.cover_pic)">
                        <Picture />
                    </el-icon>
                </el-form-item>

                <el-form-item label="LOGO:" prop="logo">
                    <el-select v-model="data.addinfo.logo" :placeholder="$t('message.pleaseSelect')" clearable filterable style="width: 94%;">
                        <el-option v-for="item of data.imgarr" :key="item.res_id"
                            :label="item.res_id + '-' + item.title" :value="item.file_path" />
                    </el-select>
                    <el-icon style="width: 6%;" size="20" @click="urlimg(data.addinfo.logo)">
                        <Picture />
                    </el-icon>
                </el-form-item>
                <el-form-item label="提示:" prop="title">
                    <el-input v-model.number="data.addinfo.hint" :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <el-form-item label="跳转URL:" prop="title">
                    <el-input v-model.number="data.addinfo.url" :placeholder="$t('message.pleaseEnter')" />
                </el-form-item>
                <div class="w-full text-center">
                    <div class="inline-block">
                        <el-button type="primary" @click="onSave()">{{ $t('public.save')}}</el-button>
                        <el-button @click="data.dialogVisible = false">{{ $t('public.cancel')}}</el-button>
                    </div>
                </div>
            </el-form>
        </el-dialog>
        <el-dialog v-model="data.demonstrate" :title="$t('machine.addMachine.material')" center width="30%">
            <div class="flex justify-center">
                <el-image class="max-w-80" :src="data.file_path" fit="fill" />
            </div>
        </el-dialog>
        <el-dialog v-model="data.dialogMachine" :title="data.title" center width="40%" @close="clean">
			<machinelist v-if="data.title_type == 1" :info="data.minfo" :list="data.maclist" @investigate="machinesubmit" />
		</el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import { getresourceList } from '@/api/advment';
import getPlevel from '@/utils/level'
import machinelist from './common/machine_list.vue';
import { ElMessage } from 'element-plus'
import { getmachineList } from '@/api/machine';
import { micro_mallAdd, getmicroList, getmicroUpdate, getmicroDel,getmicroBind } from '@/api/microShop';
let data = reactive({
    file_path: '', // 素材地址
    demonstrate: false, // 素材弹窗
    content: '',
    dialogMachine:false,
    dialogVisible: false, // 弹窗
    mtloading: false, // 加载
    lookup: [ // 筛选栏
        { title: '微商城名称', type: 'input', value: '', key: 'mall_name' }
    ],
    title: '',
    microinfo: { // 筛选数据
        mall_name: '',
        page: 1,
        pageNum: 15
    },
    addinfo: { // 筛选数据

    },
    title_type:0,// 弹窗类型
    microIds: [],
    maclist:[],
    minfo:{}, // 选中的账号信息
    flag: 1,
    total: 0, // 总条数
})
let clean = () => {
	data.title_type = 0
	data.dialogMachine = false
}
let geturl = async ()=>{
    let machinelist = await getmachineList()
    // 设备列表
		if(machinelist.state == 200){
			data.maclist = machinelist.data
		}
}
geturl()
// 所属设备 - 提交
let machinesubmit = (e) =>{
		if(e == false){
			data.dialogMachine = false
			return
		}
		getmicroBind(e).then(res=>{
			if(res.state == 200){
				ElMessage({
				  message: $t('message.bindSuccess'),
				  type: 'success'
				})
				data.dialogMachine = false
				getlist()
				return
			}
			ElMessage({
			  message: $t('message.networkFailed'),
			  type: 'error'
			})
		})
	}
let bind = (e:any) => {
    data.title = '所属设备'
	data.minfo = e
    data.title_type = 1
    data.dialogMachine = true
}
// 查看素材
let urlimg = (e) => {
    if (e == '') {
        return;
    }
    data.demonstrate = true;
    data.file_path = e;
}

// 获取列表信息
let getobjlist = () => {
    data.imgarr = []
    // 素材列表
    getresourceList({ type: 1 }).then(res => {
        if (res.state == 200) {
            for (let item of res.data) {
                if (item.status == 1) {
                    data.imgarr.push(item)
                }
            }
        }
    })
}
getobjlist()
// 查询列表
let getlist = () => {
    data.mtloading = true
    getmicroList(data.microinfo).then(res => {
        data.mtloading = false
        if (res.state == 200) {
            data.list = res.data.data
            data.total = res.data.total
        }
    })
}
let onSave = () => {
    if (!data.addinfo.mall_name) {
        ElMessage({
            message: $t('message.shopNameunEmpty'),
            type: 'error'
        });
        return
    }
    if (data.flag == 1) {
        let pram = {
            mall_name: data.addinfo.mall_name,
            logo: data.addinfo.logo,
            cover_pic: data.addinfo.cover_pic,
            hint: data.addinfo.hint,
            url: data.addinfo.url
        }
        micro_mallAdd(pram).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.addSuccess'),
                    type: 'success'
                });
                data.dialogVisible = false
                getlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }
    if (data.flag == 2) {
        getmicroUpdate(data.addinfo).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.modifySuccess'),
                    type: 'success'
                });
                data.dialogVisible = false
                getlist()
                return;
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            });
        })
    }

}
// 添加公众号
let add = (e: any, row: any) => {
    if (e == 1) {
        data.flag = 1
        data.title = '添加微商城'
        data.addinfo.mall_name = ''
        data.addinfo.logo = ''
        data.addinfo.cover_pic = ''
        data.addinfo.hint = ''
        data.addinfo.url = ''
    }
    if (e == 2) {
        data.flag = 2
        data.title = '修改微商城'
        data.addinfo.mm_id = row.mm_id
        data.addinfo.mall_name = row.mall_name
        data.addinfo.logo = row.logo
        data.addinfo.cover_pic = row.cover_pic
        data.addinfo.hint = row.hint
        data.addinfo.url = row.url
    }
    data.dialogVisible = true
}
// 查询回调
let inves = (e) => {
    for (let key in e) {
        data.microinfo[key] = e[key]
    }
    data.microinfo.page = 1
    data.microinfo.pageNum = 15
    getlist()
}
// 删除公众号
let del = (e) => {
    ElMessageBox.confirm($t('message.delData'))
        .then(res => {
            getmicroDel({ mm_id: e }).then(res => {
                if (res.state == 200) {
                    ElMessage({
                        message: $t('message.delSuccess'),
                        type: 'success'
                    })
                    getlist()
                    return
                }
                ElMessage({
                    message: $t('message.networkFailed'),
                    type: 'error'
                })
            })

        }).catch(err => {
            console.log('取消')
        })
}

// 页数回调
let current = (e) => {
    data.microinfo.page = e
    getlist()
}

// 条数回调
let fraction = (e) => {
    data.microinfo.pageNum = e
    getlist()
}
getlist()
</script>